<template>
	<view class="">
		<scroll-view style="width: 100%; height: 1000rpx; margin: auto;" scroll-y="true">
			<view v-for="(i,index) in address" :key="i.id">
				<!-- <text> </text> -->
				<view style="width: 750rpx; height: 30rpx;"></view>
				<view class="head">
						<!-- <view style="text-align: center;margin: 20rpx 0 80rpx 0;font-size: 45rpx;font-weight: 600;">用户信息</view> -->
					<!-- <view class="normal">
						姓名：{{i.name}}
					</view> -->
					<view  class="normal">
						收货人：{{i.name}}
					</view>
					<view  class="normal">
						<view style="color: crimson;display: inline-block;">*</view>手机号码：<view style="display: inline-block;color: #000000;">{{i.phone}}</view>
					</view>
					<view  class="normal">
						<view style="color: crimson;display: inline-block;">*</view>地址：{{i.address}}
					</view>
					<view  class="normal">
						<view style="color: crimson;display: inline-block;">*</view>详细地址：<view style="display: inline-block;color: #000000;">{{i.fulladdress}}</view>
					</view>
				</view>
				<view style="width: 750rpx; height: 15rpx;"></view>
			</view>
		</scroll-view>
		<!-- <scroll-view style="width: 750rpx; height: 1000rpx; margin: auto;" scroll-y="true">
			<view v-for="(i,index) in address" :key="i.id">
				<view style="width: 750rpx; height: 30rpx;"></view>
				<view class="head">
					<br>
					<view class="normal" :style="{fontSize:size}">
						收货人：{{i.name}}
					</view>
					<view class="normal">
							手机号码：{{i.phone}}
					</view>
					<view class="normal">
						地址：{{i.address}}
					</view>
					<view class="normal">
						详细地址：{{i.fulladdress}}
					</view>
				</view>
				<view style="width: 750rpx; height: 15rpx;"></view>
			</view>
		</scroll-view> -->
		<u-empty text="到底了">
		</u-empty>
		<!-- </view> -->
		<u-popup :show="showupp" mode="center" @close="close" @open="open">
			<view style="width: 750rpx;">
				<scroll-view>
					<view class="main">
						<br>
						<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
						<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth=75>
							<u-form-item label="姓名" prop="name" borderBottom ref="item1">
								<u--input v-model="form.name" border="none" placeholder="请输入姓名"></u--input>
							</u-form-item><br>
							<u-form-item label="手机号码" prop="phone" borderBottom ref="item1">
								<u--input v-model="form.phone" border="none" placeholder="请输入手机号码"></u--input>
							</u-form-item><br>
							<u-form-item label="地址" prop="address" borderBottom ref="item1">
								<u--input v-model="form.address" border="none" placeholder="请输入地址"></u--input>
							</u-form-item><br>
							<u-form-item label="详细地址" prop="fulladdress" borderBottom ref="item1">
								<u--input v-model="form.fulladdress" border="none" placeholder="请输入详细地址"></u--input>
							</u-form-item><br>
						</u--form>
					</view>
				</scroll-view>
				<view class="">
					<u-button style="border-radius: 80rpx;" type="primary" text="保存" @click="sub"></u-button>
				</view>
			</view>
		</u-popup>
		<view class="btn">
			<u-button style="border-radius: 80rpx;" type="primary" text="点击添加收货地址" @click="add"></u-button>
		</view>
		<u-toast ref="uToast" class="top"></u-toast>
	</view>

</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				address: [],
				showupp: false,
				show: false,
				form: {
					name: '',
					address: '',
					phone: '',
					fulladdress: ''
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					address: {
						type: 'string',
						required: true,
						message: '请填写地址',
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'string',
						required: true,
						len:11,
						message: '手机位数不正确',
						trigger: ['blur', 'change']
					},
					fulladdress: {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					}
				},
				radio: '',
				switchVal: false,
				tomorrow: "",
				dayAfterTomorrow: ""
			};
		},
		mounted() {
		},
		methods: {
			add() {
				this.showupp = true
			},
			close(e) {
				console.log(e)
				this.showupp = false
			},
			open(e) {
				console.log(e)
			},
			sub() {
				this.$refs.uForm.validate().then(res => {
					console.log(res)
					console.log(this.form)
					if (this.form.phone.length == 11) {
						let form = {
							name: this.form.name,
							address: this.form.address,
							phone: this.form.phone,
							fulladdress: this.form.fulladdress,
							open_id:this.$store.state.open_id
						}
						this.address.push(form)
						this.form = {
							name: '',
							address: '',
							phone: '',
							fulladdress: ''
						}
						uni.request({
							url:'http://124.223.168.50:8000/test/addressAPIView/',
							method:'POST',
							data:form,
							success: (res) => {
								console.log(res)
							},
							fail: (err) => {
								console.log(err)
							}
						})
						this.$refs.uToast.show({
							type: 'success',
							message: '添加成功'
						})
						this.showupp = false
					} else {
						uni.showToast({
							title:'手机号不对'
						})
						console.log('手机不对')
					}
					console.log('在这里')
					// if(this.form.phone.length === 11) {
					// 	var pn = {
					// 		name: this.form.name,
					// 		address: this.form.address,
					// 		phone: this.form.phone,
					// 		fulladdress: this.form.fulladdress
					// 	}
					// 	this.address.push(pn)
					// 	this.showupp = false
					// 	this.form = {
					// 		name: '',
					// 		address: '',
					// 		phone: '',
					// 		fulladdress: ''
					// 	}
					// 	this.$refs.uToast.show({
					// 		type: 'success',
					// 		message: '添加成功'
					// 	})
					// } else {
					// 	this.$refs.uToast.show({
					// 		type: 'warning',
					// 		message: '手机位数不正确!'
					// 	})
					// }

				}).catch(err => {
					console.log(err)
					this.$refs.uToast.show({
						type: 'warning',
						message: '请把信息填写完整'
					})
				})

			},
			sexSelect(e) {
				console.log(e)
				this.sex = e.name
				this.form.sex = e.value
				console.log(this.form)
			},
			hideKeyboard() {
				console.log(123)
			},
			change(e) {
				console.log(e)
				this.form.birthday = e.result
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
	};
</script>
<style scoped>
	/* .top {
		z-index: 11076;
	} */
	.btn {
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
	}

	.main {
		width: 700rpx;
		margin: auto;
	}

	.head {
		width: 700rpx;
		margin: auto;
		border: 1px solid #878787;
		box-shadow: 5rpx 5rpx 15rpx 8rpx #e7e7e7;
		border-radius: 20rpx;
		padding-bottom: 100rpx;
	}
	.normal{
		margin: 15rpx 15rpx;
		padding: 0 0 20rpx 10rpx;
		border-bottom:1rpx solid #e7e7e7;
		color: #565656;
	}
</style>